<template>
  <div class="designer-container">
    <!-- 工具栏 -->
    <ToolbarHeader :template-name="templateName" :template-type="templateType" :paper-settings="paperSettings"
      @delete-selected="handleDeleteButtonClick" @apply-paper-settings="applyPaperSettings" @export-json="exportJson"
      @import-json="importJson" @save-template="saveTemplate" @go-back="goBack" @export-pdf="exportToPDF"
      @export-preview="exportAndPreview"
       />
    <!-- 调试信息 -->
    <div v-if="isDevelopment" class="debug-info">
      <div><strong>刻度比例:</strong> {{ pxPerMm.toFixed(2) }}px/mm</div>
      <div><strong>纸张尺寸:</strong> {{ appliedPaperSettings.paperWidth }}mm x
        {{ appliedPaperSettings.paperHeight }}mm</div>
      <div><strong>内容尺寸:</strong> {{ Math.round(canvasContentWidth) }}mm x {{ Math.round(canvasContentHeight) }}mm
      </div>
      <div>
        <el-button v-throttle-click="2000" size="small" type="primary" @click="forceInitCanvas">清空内容</el-button>
      </div>
    </div>

    <div class="designer-content">
      <!-- 中央编辑区 -->
      <div class="center-panel">
        <div class="canvas-wrapper">
          <!-- 添加水平刻度尺组件 -->
          <HorizontalRuler
            :paper-width="appliedPaperSettings.paperWidth"
            :content-width="canvasContentWidth"
            :px-per-mm="pxPerMm"
            :scale-changed="scaleChanged"
          />
          <!-- 使用刻度尺组件包裹画布 -->
          <RulerPanel :paper-width="appliedPaperSettings.paperWidth" :paper-height="appliedPaperSettings.paperHeight"
            :content-width="canvasContentWidth" :content-height="canvasContentHeight" :px-per-mm="pxPerMm"
            :scale-changed="scaleChanged">
            <!-- 画布组件 -->
            <CanvasPanel :paper-width="appliedPaperSettings.paperWidth" :paper-height="appliedPaperSettings.paperHeight"
              :px-per-mm="pxPerMm" @field-selected="handleCanvasFieldSelected" @field-unselected="handleFieldUnselected"
              @object-added="handleObjectAdded" @drop="handleCanvasDrop" />
          </RulerPanel>
        </div>
      </div>

      <!-- 右侧属性面板 -->
      <PropertyPanel :template-type="templateType" :template-fields="printTemplateFields[templateType]?.fields || {}"
        :px-per-mm="pxPerMm" :paper-width="appliedPaperSettings.paperWidth"
        :paper-height="appliedPaperSettings.paperHeight" :paper-direction="paperSettings.printDirection"
        :paper-border-type="paperSettings.printBorderType" :has-background="hasBackgroundImage"
        :network-image-url="networkImageUrl" :background-opacity="backgroundOpacityPercent"
        :background-edit-mode="backgroundEditMode"
        @field-selected="handleFieldSelected" @field-unselected="handleFieldUnselected"
        @add-section-title="handleSectionTitle" @add-network-image="handleNetworkImageAsBackground"
        @upload-background="handleUploadBackground" @remove-background="removeCanvasBackground"
        @clear-canvas="clearCanvas" 
        @apply-paper-settings="applyPaperSettings" @update-opacity="handleOpacityUpdate" 
        @toggle-edit-mode="toggleBackgroundEditMode" @add-table="handleAddTable" />
    </div>

    <!-- 添加表格配置对话框 -->
    <TableConfigDialog
      v-model:visible="tableConfigVisible"
      :initial-config="currentTableConfig"
      :px-per-mm="pxPerMm"
      :use-initial-data="!!currentTableConfig"
      @confirm="handleTableConfigConfirm"
    />

  </div>
</template>

<script setup>
import {
  ref,
  reactive,
  onMounted,
  onBeforeUnmount,
  watch,
  nextTick,
  computed,
  provide,
  onActivated,
  onDeactivated,
  onUnmounted
} from 'vue';
import {
  useRoute,
  useRouter
} from 'vue-router';
import {
  ElMessage,
  ElMessageBox,
  ElLoading
} from 'element-plus';
import html2canvas from 'html2canvas';
import {
  jsPDF
} from 'jspdf';
import JsBarcode from 'jsbarcode'; // 确保正确导入JsBarcode
// 导入组件
import ToolbarHeader from './components/ToolbarHeader.vue';
import RulerPanel from './components/RulerPanel.vue';
import HorizontalRuler from './components/HorizontalRuler.vue';
import CanvasPanel from './components/CanvasPanel.vue';
import PropertyPanel from './components/PropertyPanel.vue';
import TableConfigDialog from './components/TableConfigDialog.vue'; // 导入表格配置组件

// 导入可组合函数
import useCanvas from './composables/useCanvas';
import useTemplateLoader from './composables/useTemplateLoader';
import usePaperSettings from './composables/usePaperSettings';
import useCanvasOperations from './composables/useCanvasOperations';
import useExportImport from './composables/useExportImport';

// 导入工具函数和配置
import {
  handleError,
  canvasErrorHandler,
  templateErrorHandler
} from './utils/errorHandling';
import {
  mmToPx,
  pxToMm,
  calculatePxPerMm,
  waitForCanvas,
  isCanvasReady
} from './utils/canvasUtils';
import {
  printTemplateFields,
  getDefaultTemplateName,
  adjustPaperSettingsByType
} from './config/templateFieldsConfig';
const printFields = reactive({});
provide('printFields', printFields);
const route = useRoute();
const router = useRouter();

// 模板基本信息
const templateId = ref(route.query.id || '');
const templateName = ref(route.query.name || '');
const templateType = ref(route.query.type || 'product');
// 标记模板是否已保存
const saved = ref(true);
// 存储当前模板类型到localStorage，以便页面刷新或标签页切换后仍能记住
const saveTemplateTypeToStorage = (type) => {
  if (type) {
    localStorage.setItem('designerTemplateType', type);
  }
};

// 从localStorage获取上次保存的模板类型
const getStoredTemplateType = () => {
  return localStorage.getItem('designerTemplateType');
};

// 初始化时从localStorage中读取上次保存的类型
const storedTemplateType = getStoredTemplateType();
// 如果URL没有指定类型，但localStorage有存储的类型，则使用存储的类型
if (!route.query.type && storedTemplateType) {
  templateType.value = storedTemplateType;
}

// 监听模板变更，自动标记为未保存
watch(
  () => {
    saved.value = false;
  },
  { deep: true }
);

// 监听模板类型变化，保存到localStorage
watch(templateType, (newValue) => {
  console.log('模板类型变更为:', newValue);
  saveTemplateTypeToStorage(newValue);
}, { immediate: true });

// 声明updateRulerDimensions函数引用
const updateRulerDimensionsRef = ref(null);

// 先初始化纸张设置功能
const {
  paperSettings,
  appliedPaperSettings,
  pxPerMm,
  canvasContentWidth,
  canvasContentHeight,
  setPxPerMm,
  adjustSettingsByType
} = usePaperSettings({
  updateRulerDimensions: () => {
    if (updateRulerDimensionsRef.value) {
      updateRulerDimensionsRef.value();
    }
  }
});

// 初始化画布相关功能
const {
  initCanvas,
  deleteSelectedObject,
  updateCanvasSize,
  handleFieldSelected,
  handleFieldUnselected,
  canvas,
  setBackgroundImage,
  removeBackgroundImage,
  clearCanvas,
  updateRulerDimensions, // 恢复updateRulerDimensions函数的引用
  addLine
} = useCanvas({
  canvasId: 'designer-canvas',
  onObjectSelected: (objects) => {
    console.log('对象被选中:', objects);
  },
  onSelectionCleared: () => {
    console.log('选择已清除');
  },
  onObjectModified: () => {
    console.log('对象已修改');
  },
  onContentChanged: () => {
    // 画布内容变更时的处理
    console.log('画布内容已变更');
  },
});

// 将updateRulerDimensions保存到ref中，以便纸张设置可以使用
updateRulerDimensionsRef.value = updateRulerDimensions;

// 获取使用Canvas操作的相关功能
const {
  hasBackgroundImage,
  networkImageUrl,
  scaleChanged,
  handleNetworkImageAsBackground,
  handleBackgroundImageUpload,
  removeCanvasBackground,
  exportCanvasToImage,
  updateBackgroundOpacity,
  setBackgroundEditable
} = useCanvasOperations();

// 背景图片透明度（百分比形式，用于UI显示）
const backgroundOpacityPercent = ref(40);

// 背景图片编辑模式状态
const backgroundEditMode = ref(false);

// 更新背景图片透明度
const handleOpacityUpdate = (opacityDecimal) => {
  console.log('更新背景透明度:', opacityDecimal);
  // 将0-1的小数转为百分比
  backgroundOpacityPercent.value = Math.round(opacityDecimal * 100);
  // 调用更新背景透明度的方法
  updateBackgroundOpacity(opacityDecimal);
};

// 切换背景图片编辑模式
const toggleBackgroundEditMode = (isEnabled) => {
  console.log('切换背景图片编辑模式:', isEnabled);
  // 更新编辑模式状态
  backgroundEditMode.value = isEnabled;
  // 调用设置背景可编辑的方法
  setBackgroundEditable(isEnabled);
};

// 设置表格数据
const setTableData = (initialData) => {
  // 如果没有初始数据，则不进行操作
  if (!initialData) {
    console.log('未提供表格配置数据，不进行初始化');
    return;
  }

  console.log('设置表格数据，收到initialData:', initialData);
  
  // 准备表格配置初始数据
  let tableConfigWidth = 0;
  let tableConfigHeight = 0;
  
  // 过滤出文本类型的字段作为表格列
  const textFields = printTemplateFields[templateType.value]?.fields.order.filter(field => field.type === 'text'||field.type === 'barcode') || [];
  
  // 创建一个已处理key的集合，用于跟踪哪些字段已被处理
  const processedKeys = new Set();
  
  // 创建tableColumns数组
  const tableColumns = [];
  
  // 首先处理initialData.headers中的列，它们应该排在最前面
  if (initialData.headers && initialData.headers.length > 0) {
    initialData.headers.forEach(header => {
      // 查找对应的字段信息
      const field = textFields.find(f => f.key === header.key);
      if (field) {
        // 添加到columns中，使用header中的配置
        tableColumns.push({
          key: header.key,
          label: field.label,
          type: field.type === 'barcode' ? 'text' : field.type,
          width: mmToPx(header.width, pxPerMm.value),
          height: mmToPx(initialData.cellHeight, pxPerMm.value),
          visible: header.visible
        });
        
        // 累加宽度和高度
        tableConfigWidth += header.width;
        tableConfigHeight += initialData.cellHeight || 10;
        
        // 标记该key已处理
        processedKeys.add(header.key);
      }
    });
  }
  
  // 然后处理textFields中剩余的未处理字段
  textFields.forEach(field => {
    // 如果该字段已经在headers中处理过，则跳过
    if (processedKeys.has(field.key)) {
      return;
    }
    
    // 使用默认宽度
    const width = field.width || 20; // 默认20mm宽度
    
    // 添加到columns中
    tableColumns.push({
      key: field.key,
      label: field.label,
      type: field.type === 'barcode' ? 'text' : field.type,
      width: mmToPx(width, pxPerMm.value),
      height: mmToPx(initialData.cellHeight, pxPerMm.value),
      visible: false // 默认不可见
    });
    
    // 累加宽度和高度
    tableConfigWidth += width;
    tableConfigHeight += initialData.cellHeight || 10;
  });

 // 创建一个全新的表格配置对象，避免引用问题
  const tableConfig = {
    key: templateType.value+'Table', // 确保每次都有唯一的key
    label: initialData.label,
    type: 'table',
    textTemplate: '', // 为了适配导入导出需要有个空字段
    position: initialData.position,
    style: { fontSize: initialData.headerFontSize, bold: initialData.headerBold, color: initialData.headerTextColor },
    width: tableConfigWidth,
    height: tableConfigHeight,
    columns: tableColumns,
    rows: initialData.rows, // 默认5行数据
    rowHeight: initialData.cellHeight, // 默认行高10mm
    strokeColor: initialData.strokeColor,
    strokeWidth: initialData.strokeWidth,
    data: initialData.tableData,
  };

  console.log('index.vue: 表格配置已初始化:', tableConfig);
  // 使用全新的对象引用，确保响应式刷新
  currentTableConfig.value = tableConfig;
  // 标记为已初始化
  isTableConfigInitialized.value = true;
}

// 初始化模板加载功能
const {
  loadDefaultTemplate,
  loadTemplateData,
  exportTemplateToJson,
  importTemplateFromJson,
} = useTemplateLoader({
  printTemplateFields,
  clearCanvas,
  updateRulerDimensions,
  mmToPx: (value) => mmToPx(value, pxPerMm),
  pxPerMm,
  templateType, // 添加模板类型参数
  adjustPaperSettingsByType, // 添加调整纸张设置的函数
  setPxPerMm: (newValue) => {
    pxPerMm.value = newValue;
  }, // 添加设置pxPerMm的函数
  applyPaperSettings: (settings) => { // 添加应用纸张设置的函数


    console.log('接收到纸张设置应用请求:', settings);

    // 1. 更新paperSettings (设置值)
    if (settings.paperWidth) paperSettings.paperWidth = settings.paperWidth;
    if (settings.paperHeight) paperSettings.paperHeight = settings.paperHeight;
    if (settings.paperDirection) paperSettings.paperDirection = settings.paperDirection;
    if (settings.printBorderType) paperSettings.printBorderType = settings.printBorderType;
    if (settings.pxPerMm) setPxPerMm(settings.pxPerMm);

    // 2. 确保appliedPaperSettings与paperSettings同步 - 这是关键步骤
    appliedPaperSettings.paperWidth = paperSettings.paperWidth;
    appliedPaperSettings.paperHeight = paperSettings.paperHeight;

    // 3. 更新画布尺寸 - 先更新画布尺寸再更新刻度尺
    console.log('正在更新画布尺寸:', appliedPaperSettings.paperWidth, 'x', appliedPaperSettings.paperHeight);
    updateCanvasSize(settings.paperWidth, settings.paperHeight);

    // 4. 更新刻度尺
    updateRulerDimensions();

    // 5. 记录应用的设置到控制台
    console.log('应用后的纸张设置:',
      '宽度:', appliedPaperSettings.paperWidth,
      '高度:', appliedPaperSettings.paperHeight
    );
  },
  printFields,
  handleFieldSelected,
  setTableData
});

// 初始化导入导出功能
const {
  exportJson: originalExportJson,
  importJson: originalImportJson,
  downloadTemplate,
  exportToPDF: originalExportToPDF
} = useExportImport({
  getTemplateData: () => {
    // 使用已经初始化的exportTemplateToJson函数，而不是重新调用useTemplateLoader
    return exportTemplateToJson();
  },
  loadTemplateData: (jsonContent) => {
    // 使用已经初始化的importTemplateFromJson函数，而不是重新调用useTemplateLoader
    return importTemplateFromJson(jsonContent);
  },
  clearCanvas: () => {
    // 清空画布
    clearCanvas();
  },
  updateRulerDimensions: updateRulerDimensions,
  pxPerMm // 传递像素/毫米比例
});

// 包装导出函数，不需要修改
const exportJson = originalExportJson;

// 包装导入函数，添加表格配置重置
const importJson = async () => {
  // 先重置表格配置
  isTableConfigInitialized.value = false;
  currentTableConfig.value = null;
  
  // 调用原始导入函数
  return originalImportJson();
};

// 包装导出PDF函数
const exportToPDF = async () => {
  try {
    // 请求用户确认
    await ElMessageBox.confirm(
      '即将生成高质量PDF文件，请确保您的设计内容已完成。生成过程可能需要几秒钟时间。',
      '导出PDF',
      {
        confirmButtonText: '开始导出',
        cancelButtonText: '取消',
        type: 'info'
      }
    );
    
    // 显示加载中提示
    const loadingInstance = ElLoading.service({
      text: '准备导出高质量PDF...',
      background: 'rgba(0, 0, 0, 0.7)'
    });
    
    // 确保所有对象都已被渲染和更新
    if (window.globalCanvas) {
      window.globalCanvas.renderAll();
    }
    
    // 延迟一小段时间，确保画布完全渲染
    await new Promise(resolve => setTimeout(resolve, 200));
    
    // 调用原始导出PDF函数
    const success = await originalExportToPDF(templateName.value, {
      paperWidth: appliedPaperSettings.paperWidth,
      paperHeight: appliedPaperSettings.paperHeight
    });
    
    loadingInstance.close();
    
    if (!success) {
      ElMessage.error('PDF导出失败，请重试');
    }
  } catch (error) {
    // 用户取消或发生错误
    if (error !== 'cancel') {
      console.error('导出PDF时发生错误:', error);
      ElMessage.error('PDF导出失败: ' + (error.message || '未知错误'));
    }
  }
};

const exportedTemplateJson = ref('');
const testData = reactive({});

// 处理添加段落标题
const handleSectionTitle = () => {
  // 弹出对话框让用户输入自定义标题文本
  ElMessageBox.prompt('请输入自定义内容', '添加自定义文本', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    inputValue: '自定义文本',
    inputPlaceholder: '请输入自定义文本',
    inputPattern: /^.+$/,
    inputErrorMessage: '标题不能为空'
  }).then(({ value }) => {
    // 获取画布中心位置
    if(value){
      const centerX = (appliedPaperSettings.paperWidth/10)*3;
      const centerY = 10; // 默认位置在纸张顶部
      
      // 计算自适应宽度：中文字符占10像素，数字和字母占5像素
      let width = 0;
      for(let i = 0; i < value.length; i++) {
        const char = value.charAt(i);
        if(/[\u4e00-\u9fa5]/.test(char)) {
          // 中文字符
          width += 8;
        } else if(/[a-zA-Z0-9]/.test(char)) {
          // 数字和字母
          width += 4;
        } else {
          // 其他字符（标点等）
          width += 4;
        }
      }
      
      // 添加最小宽度和额外间距
      width = Math.max(width, 20);
      width += 10; // 额外边距
      const time = new Date().getTime();
      const titleOptions = {
        key: 'customTitle_'+time,
        label: '自定义文本',
        type: 'text',
        textTemplate: value,
        position: { x: centerX, y: centerY },
        style: { fontSize: 30, bold: false, color: "#000" },
        width: width,
        height: 10
      };
      
      // 注意：这里直接使用useCanvas.js中的handleFieldSelected方法来添加
      handleFieldSelected(titleOptions);
      
      ElMessage({
        message: '标题添加成功',
        type: 'success'
      });
    } else {
      ElMessage({
        message: '请输入标题文本',
        type: 'warning'
      });
    }
  }).catch(() => {
    // 用户取消输入，不执行任何操作
  });
};

// 处理对象添加事件
const handleObjectAdded = (object) => {
  console.log('对象添加事件:', object);
};

// 处理CanvasPanel中的字段选择事件 - 专用于从属性面板拖拽到画布的情况
const handleCanvasFieldSelected = (fieldConfig) => {
  console.log('画布接收到字段选择:', fieldConfig);
  
  // 如果有拖拽位置信息，更新字段配置中的位置信息
  if (fieldConfig.dropPosition) {
    // 将像素位置转换为毫米位置
    const mmLeft = pxToMm(fieldConfig.dropPosition.left,pxPerMm.value);
    const mmTop = pxToMm(fieldConfig.dropPosition.top,pxPerMm.value);
    
    console.log(`拖拽位置(像素): (${fieldConfig.dropPosition.left}, ${fieldConfig.dropPosition.top})`);
    console.log(`拖拽位置(毫米): (${mmLeft}, ${mmTop})`);
    
    // 更新字段位置
    fieldConfig.position = {
      x: mmLeft,
      y: mmTop
    };
    
    // 删除临时的拖拽位置信息
    delete fieldConfig.dropPosition;
  }
  
  
  // 调用原有的字段选择处理函数
  handleFieldSelected(fieldConfig);
  if(fieldConfig.type !== 'line'){
    printFields[fieldConfig.key] = true;
  } 
};

// 处理画布拖拽事件 - 对接属性面板的字段拖拽
const handleCanvasDrop = (data) => {
  console.log('处理画布拖拽事件，数据:', data);
  
  // 主要处理逻辑已在handleCanvasFieldSelected中实现
  // 此处可以添加额外的拖拽处理逻辑
};

// 处理对象移除事件
const handleObjectRemoved = (object) => {
  console.log('对象被删除事件触发:', object);
  if (!object) return;

  // 使用类型和字段名检查是否是字段对象
  if (object.customType === 'field' && object.fieldName) {
    console.log(`检测到字段对象被删除: ${object.fieldName}`);
  }
  
  // 标记为未保存状态
  saved.value = false;
};

// 加载已有模板数据
const loadExistingTemplate = async (id) => {
  try {
    console.log(`正在加载模板ID: ${id}`);
    // 这里应该添加从后端加载模板数据的逻辑
    // 例如：const templateData = await api.getTemplateById(id);

    // 模拟加载模板数据的行为
    const templateData = {
      name: templateName.value,
      type: templateType.value,
      // 其他模板数据...
    };

    // 加载模板数据
    await loadTemplateData(templateData);

    ElMessage.success('模板加载成功');
  } catch (error) {
    templateErrorHandler(error, '加载模板失败');
  }
};

// 保存模板
const saveTemplate = async () => {
  try {
    // 这里应该添加模板保存到后端的逻辑
    ElMessage.success('模板已保存');
    saved.value = true;
  } catch (error) {
    templateErrorHandler(error, '保存模板失败');
  }
};

// 处理删除按钮点击事件
const handleDeleteButtonClick = () => {
  ElMessageBox.confirm('确定要删除选中的对象吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    deleteSelectedObject(printFields);
  }).catch(() => {
    // 用户取消删除
  });
};

// 处理键盘删除事件
const handleKeyDown = (e) => {

  // 如果按下的是删除键（Delete）
  if (e.key === 'Delete') {
    deleteSelectedObject(printFields);
  }
};

// 是否为开发环境
const isDevelopment = process.env.NODE_ENV === 'development' || true;

// 返回上一页
const goBack = () => {
  if (!saved.value) {
    ElMessageBox.confirm('模板尚未保存，确定要返回吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      router.go(-1);
    }).catch(() => {
      // 用户取消返回
    });
  } else {
    router.go(-1);
  }
};


// 处理PropertyPanel中纸张设置的应用
const applyPaperSettings = (settings) => {
  console.log('接收到纸张设置应用请求:', settings);

  // 1. 更新paperSettings (设置值)
  if (settings.paperWidth) paperSettings.paperWidth = settings.paperWidth;
  if (settings.paperHeight) paperSettings.paperHeight = settings.paperHeight;
  if (settings.paperDirection) paperSettings.paperDirection = settings.paperDirection;
  if (settings.printBorderType) paperSettings.printBorderType = settings.printBorderType;
  if (settings.pxPerMm) setPxPerMm(settings.pxPerMm);

  // 2. 确保appliedPaperSettings与paperSettings同步 - 这是关键步骤
  appliedPaperSettings.paperWidth = paperSettings.paperWidth;
  appliedPaperSettings.paperHeight = paperSettings.paperHeight;

  // 3. 更新画布尺寸 - 先更新画布尺寸再更新刻度尺
  console.log('正在更新画布尺寸:', appliedPaperSettings.paperWidth, 'x', appliedPaperSettings.paperHeight);
  updateCanvasSize(settings.paperWidth, settings.paperHeight);

  // 4. 更新刻度尺
  updateRulerDimensions();

  // 5. 记录应用的设置到控制台
  console.log('应用后的纸张设置:',
    '宽度:', appliedPaperSettings.paperWidth,
    '高度:', appliedPaperSettings.paperHeight
  );
};

// 生命周期钩子 - 组件挂载
onMounted(async () => {
  console.log('模板设计器组件已挂载');

  forceInitCanvas();
});

// 组件卸载时 - 当标签页关闭或组件彻底销毁时触发
onUnmounted(() => {
  console.log('模板设计器组件被彻底销毁，执行清理...');
  
  // 1. 移除键盘事件监听
  window.removeEventListener('keydown', handleKeyDown);
  
  // 执行清理画布的逻辑
  forceInitCanvas();

  
  console.log('模板设计器组件已被彻底销毁，资源已清理');
});

// 生命周期钩子 - 组件被缓存时（标签页切换离开时触发）
onDeactivated(() => {
  console.log('模板设计器组件被缓存(标签切换)，执行暂时清理...');
  
  // 保存当前模板类型到localStorage
  saveTemplateTypeToStorage(templateType.value);
  console.log('保存当前模板类型:', templateType.value);
  
  // 移除键盘事件监听
  window.removeEventListener('keydown', handleKeyDown);
  
  // 这里可以执行一些轻量级的清理，但不销毁画布实例
  // 可以根据需要注释掉下面的画布清理代码，以便在切回时保持画布状态
  // cleanupCanvas();
  
  console.log('模板设计器组件已被缓存，临时资源已清理');
});

// 生命周期钩子 - 组件激活（从缓存中恢复）
onActivated(() => {
  console.log('模板设计器组件被激活');
  
  // 获取当前URL中的模板类型参数
  const urlType = route.query.type;
  // 获取之前存储的模板类型
  const storedType = getStoredTemplateType();
  
  console.log('URL类型:', urlType, '存储的类型:', storedType);
  
  // 只有在以下情况下才执行初始化:
  // 1. URL中有type参数
  // 2. URL中的type参数与存储的类型不同
  if (urlType && urlType !== storedType) {
    console.log(`PrintItemsPanel-主文件: ${storedType} -> ${urlType}, 需要重新初始化模板`);
    
    // 更新模板类型
    templateType.value = urlType;
    // 保存到localStorage
    saveTemplateTypeToStorage(urlType);
    
    // 重置表格配置状态
    isTableConfigInitialized.value = false;
    currentTableConfig.value = null;
    
    // 强制重新初始化画布
    forceInitCanvas();
  } else {
    console.log('模板类型未变更，保持当前画布状态');
    
    // 重新添加可能被移除的事件监听器
    window.addEventListener('keydown', handleKeyDown);
    
    // 刷新画布，确保正确显示
    if (window.globalCanvas) {
      window.globalCanvas.renderAll();
    }
  }
});

// 公共的清理画布函数
const cleanupCanvas = () => {
  try {
    // 确保canvas存在
    if (canvas && canvas.value) {
      // 解绑所有事件监听器
      canvas.value.off && canvas.value.off();
      // 清空所有对象
      canvas.value.clear && canvas.value.clear();
      // 销毁画布实例
      canvas.value.dispose && canvas.value.dispose();
      canvas.value = null;
    }
    
    // 清除全局引用
    if (window.globalCanvas) {
      // 解绑所有事件监听器
      window.globalCanvas.off && window.globalCanvas.off();
      // 清空所有对象
      window.globalCanvas.clear && window.globalCanvas.clear();
      // 销毁画布实例
      window.globalCanvas.dispose && window.globalCanvas.dispose();
      window.globalCanvas = null;
    }
    
    // 额外检查并移除残留的canvas元素
    setTimeout(() => {
      const extraCanvases = document.querySelectorAll('.upper-canvas, .lower-canvas');
      if (extraCanvases.length > 0) {
        console.log(`清理${extraCanvases.length}个残留canvas元素...`);
        extraCanvases.forEach(canvas => {
          if (canvas.parentNode) {
            canvas.parentNode.removeChild(canvas);
          }
        });
      }
    }, 0);
    
    // 重置状态变量
    backgroundOpacityPercent.value = 40;
    backgroundEditMode.value = false;
  } catch (error) {
    console.error('清理画布时发生错误:', error);
  }
};

// 设置画布变化监听的函数，提取为单独函数，以便在activated中重用
const setupCanvasChangeMonitor = () => {
  if (window.globalCanvas) {
    // 监听object:added事件
    window.globalCanvas.on('object:added', () => {
      console.log('画布内容变化: 对象添加');
      saved.value = false;
    });
    
    // 监听object:removed事件
    window.globalCanvas.on('object:removed', () => {
      console.log('画布内容变化: 对象删除');
      saved.value = false;
    });
    
    // 监听object:modified事件
    window.globalCanvas.on('object:modified', () => {
      console.log('画布内容变化: 对象修改');
      saved.value = false;
    });
  }
};

// 初始化画布
const forceInitCanvas = async () => {
  try {
    console.log('forceInitCanvas: 初始化选中对象...',printFields);
    
    // 重置printFields中的所有字段值为false
    Object.keys(printFields).forEach(key => {
      printFields[key] = false;
    });
    
    // 初始化纸张设置 - 使用已存在的adjustSettingsByType函数
    // 注意：此处会根据模板类型设置默认值，但如果用户后续手动设置，则不会再被覆盖
    adjustSettingsByType(templateType.value);

    // 应用设置到画布 - 确保paperSettings和appliedPaperSettings同步
    applyPaperSettings(paperSettings);

    // 输出当前的纸张设置值，用于调试
    console.log('初始纸张设置:', JSON.stringify(paperSettings));
    console.log('应用的纸张设置:', JSON.stringify(appliedPaperSettings));

    // 等待DOM更新，确保canvas元素已渲染
    await nextTick();

    console.log('开始初始化画布...');
    console.log('纸张设置:', appliedPaperSettings);

    // 确保纸张设置有效
    if (!appliedPaperSettings.paperWidth || !appliedPaperSettings.paperHeight) {
      console.warn('纸张设置异常，使用默认值');
      appliedPaperSettings.paperWidth = 148;
      appliedPaperSettings.paperHeight = 105;
    }

    // 初始化画布
    await initCanvas(
      appliedPaperSettings.paperWidth,
      appliedPaperSettings.paperHeight
    );

    // 等待画布初始化完成
    await waitForCanvas();

    console.log('画布初始化完成');
    
    // 加载模板
    if (templateId.value) {
      loadExistingTemplate(templateId.value);
    } else {
      // 加载默认模板
      console.log('加载默认模板类型:', templateType.value);
      loadDefaultTemplate(templateType.value);
      
      // 初始化表格配置（仅在首次加载默认模板时）
      initTableData();
    }

    // 添加键盘事件监听
    window.addEventListener('keydown', handleKeyDown);
    
    // 保存当前模板类型到localStorage
    saveTemplateTypeToStorage(templateType.value);
    console.log('已保存模板类型到localStorage:', templateType.value);
    
    // 设置画布变化监听
    setupCanvasChangeMonitor();
  } catch (error) {
    console.error('模板设计器初始化失败', error);
    ElMessage.error('模板设计器初始化失败，请刷新页面重试');
  }
};

// 添加一个新的方法用于处理上传背景图片的事件
const handleUploadBackground = (file) => {
  console.log('index.vue: 接收到上传背景图片事件，文件:', file?.name);
  
  if (!file) {
    ElMessage.error('没有选择文件');
    return;
  }
  
  console.log('index.vue: 调用handleBackgroundImageUpload方法处理文件');
  try {
    // 调用useCanvasOperations中的处理方法
    handleBackgroundImageUpload(file);
  } catch (error) {
    console.error('上传背景图片失败:', error);
    ElMessage.error('上传背景图片失败: ' + error.message);
  }
};

// 添加新的响应式状态
const tableConfigVisible = ref(false);
const currentTableConfig = ref(null);
// 添加一个标志变量，记录表格配置是否已初始化
const isTableConfigInitialized = ref(false);

const initTableData = () => {
  // 如果已经初始化过且有配置数据，则不再重新加载
  if (isTableConfigInitialized.value && currentTableConfig.value) {
    console.log('表格配置已存在，不再重新初始化');
    return;
  }

  console.log('初始化默认表格配置');
  
  // 过滤出文本类型的字段作为表格列
  const textFields = printTemplateFields[templateType.value]?.fields.order.filter(field => field.type === 'text'||field.type === 'barcode') || [];
  // 准备表格配置初始数据
  let tableConfigWidth = 0;
  let tableConfigHeight = 0;
  
  const tableColumns = textFields.map(field => {
    // 使用默认宽度（如果原始宽度不存在）
    const width = field.width || 20; // 默认20mm宽度
    tableConfigWidth += width;
    tableConfigHeight += field.height || 10;
    
    // 返回列配置
    return {
      key: field.key,
      label: field.label,
      type: field.type === 'barcode' ? 'text' : field.type,
      width: mmToPx(width, pxPerMm.value), // 这里进行了毫米到像素的转换
      widthMM: width, // 保存毫米宽度
      height: mmToPx(field.height || 10, pxPerMm.value), // 使用默认高度
      visible: true
    };
  });

  // 创建一个全新的表格配置对象，避免引用问题
  const tableConfig = {
    key: templateType.value+'Table', // 确保每次都有唯一的key
    label: '商品数据表',
    type: 'table',
    textTemplate: '', // 为了适配导入导出需要有个空字段
    position: { x: 20, y: 35 },
    style: { fontSize: 14, bold: false, color: "#000" },
    width: tableConfigWidth,
    height: tableConfigHeight || 50,
    columns: tableColumns,
    rows: 5, // 默认5行数据
    rowHeight: 10, // 默认行高10mm
    strokeColor: '#000000',
    strokeWidth: 1,
    data: []
  };
  
  console.log('index.vue: 表格配置已初始化:', tableConfig);
  // 使用全新的对象引用，确保响应式刷新
  currentTableConfig.value = tableConfig;
  // 标记为已初始化
  isTableConfigInitialized.value = true;
}


const handleAddTable = () => {
  console.log('index.vue: 接收到添加表格事件');
  
  // 初始化表格数据（如果需要）
  initTableData();
  
  // 显示表格配置对话框
  tableConfigVisible.value = true;
};


// 处理表格配置确认
const handleTableConfigConfirm = (config) => {
  if (typeof window === 'undefined' || !window.globalCanvas) return;
  
  console.log('表格配置已确认:', config);
  
  // 查找是否已存在相同key的表格对象
  const objects = window.globalCanvas.getObjects();
  const tableObject = objects.find(object => object.fieldName === config.key);
  
  // 如果已存在，先删除
  if (tableObject) {
    console.log('找到现有表格对象，先移除:', tableObject.fieldName);
    handleFieldUnselected(tableObject.fieldName);
  }
  
  // 保存最新配置到currentTableConfig
  currentTableConfig.value = { ...config };
  
  // 准备添加到画布的最终配置
  const finalConfig = {
    key: config.key,
    label: config.label,
    type: 'table',
    position: config.position,
    rows: config.rows,
    cols: config.columns.filter(col => col.visible).length,
    cellWidth: 20, // 默认单元格宽度，会被headers中的width覆盖
    cellHeight: config.rowHeight,
    strokeColor: config.strokeColor || '#000000',
    strokeWidth: config.strokeWidth || 1,
    fieldName: config.key,
    hasHeader: true,
    headerTextColor: '#000000', // 默认黑色文本
    headerFontSize: config.style.fontSize || 12,
    headerBold: config.style.bold || false,
    headers: config.columns.filter(col => col.visible).map(col => ({
      key: col.key,
      label: col.label,
      width: col.widthMM, // 使用毫米宽度
      type: col.type,
      height: col.height, // 使用默认高度
      visible: col.visible
    })),
    tableData: config.data || []
  };
  
  // 调用之前实现的方法添加表格
  handleFieldSelected(finalConfig);
  
  // 标记为未保存
  saved.value = false;
};

// 监听模板类型变化，当类型改变时重置表格配置
watch(templateType, (newType, oldType) => {
  if (newType !== oldType) {
    console.log(`模板类型已从 ${oldType} 变更为 ${newType}，重置表格配置`);
    // 重置表格配置初始化状态
    isTableConfigInitialized.value = false;
    // 清空当前表格配置
    currentTableConfig.value = null;
  }
});

// 提供全局属性
provide('pxPerMm', pxPerMm);
provide('paperSettings', appliedPaperSettings);
provide('printTemplateFields', printTemplateFields);
provide('templateType', templateType);

// 导出JSON并预览
const exportAndPreview = async () => {
  try {
    if (!isCanvasReady()) {
      throw new Error('画布未初始化');
    }
    
    const jsonData = exportTemplateToJson();
    if (!jsonData) {
      throw new Error('获取模板数据失败');
    }
    
    // 将JSON数据存储到localStorage，以便预览页面使用
    localStorage.setItem('previewTemplateData', jsonData);
    
    // 跳转到预览页面
    router.push({
      path: '/configuration/print-management/preview',
      query: {
        name: templateName.value,
        type: templateType.value,
        fromDesigner: 'true'
      }
    });
  } catch (error) {
    console.error('导出JSON并预览失败:', error);
    ElMessage.error('导出JSON并预览失败: ' + error.message);
  }
};

</script>


<style lang="scss">
.designer-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  background-color: #f5f5f5;

  .debug-info {
    background-color: #f8f9fa;
    border: 1px solid #dcdfe6;
    padding: 10px;
    margin: 10px;
    border-radius: 4px;
    font-size: 12px;

    div {
      margin-bottom: 5px;
    }

    strong {
      color: #409eff;
    }
  }

  .designer-content {
    flex: 1;
    display: flex;
    width: 100%;
    overflow: hidden;
    position: relative;

    .center-panel {
      flex: 1;
      position: relative;
      overflow: hidden;

      .canvas-wrapper {
        width: 100%;
        height: 100%;
        position: relative;
        overflow: auto;
        display: flex;
        flex-direction: column;
        
        /* 水平刻度尺固定在顶部 */
        .horizontal-ruler-container {
          flex: 0 0 30px;
        }
        
        /* 垂直刻度尺和画布区域 */
        .ruler-container {
          flex: 1;
          margin-top: 0;
          display: flex;
        }
      }
    }
  }

  .scale-animation {
    transition: transform 0.3s ease;
  }
}

</style>